<script setup lang="ts">
import { hotToken, activeAddress, getData } from "./scripts/index";
import { onMounted } from "vue";
import JSuggest from "@/components/j-suggest/index.vue";
import TagS from "./TagS.vue";

onMounted(() => {
    //请求推荐数据
    getData();
});
</script>
<template>
    <div class="context d-flex flex-column align-center">
        <p class="t1 c-title-1">
            <!-- 快速搜索 -->
            {{ $t("message.Context.a") }}
        </p>
        <p class="t2 c-title-4 my-2">
            <!-- 输入需要搜索的以太坊地址、钱包、项目名称 -->
            {{ $t("message.Context.b") }}
        </p>
        <div class="mt-5 ipt">
            <JSuggest :width="34.5"></JSuggest>
        </div>
        <div class="mt-5">
            <TagS class="tagA" :title="$t('message.Context.c')" :is-more="false" :tag-list="hotToken"></TagS>
        </div>
        <div class="mt-5">
            <TagS :title="$t('message.Context.d')" :tag-list="activeAddress"></TagS>
        </div>
    </div>
</template>
<style lang="scss">
.context {
    width: 1044px;
    height: 775px;
    // background-color: green;
    position: relative;
    z-index: 2;

    .tagA{
        .v-row{
            span{
                text-align: center;
                // color: red;
            }
        }
    }

    &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        // border: 1px dashed var(--card);
        background-image: url("@/assets/coomUnityBG.png");
        opacity: 1;
        z-index: -1;
    }

    .t1 {
        margin-top: 197px;
        font-size: 28px;
        font-weight: 600;
    }

    .ipt {
        width: 656px;
        height: 46px;

        // background-color: red;
        .r-suggest,
        .j-input,
        .j-input-txt {
            height: 46px !important;
            // width: 100% !important;
        }
    }
}
</style>
